import Vue from 'vue'
import Vuex from 'vuex'
import {
    INCREMENT
  } from './mutations-types'
  

// 1.安装插件
Vue.use(Vuex)

// 2.创建对象

// 一定要放在引用的前面不然会报错,找不到
const moduleA = {
    state: {
        name: "zhanghan"
    },
    mutations:{
        updateName(state, payload){
            state.name = payload;
        }
    },
    actions: {
        aUpdateName(context){
            console.log(context)
            setTimeout(()=>{
                context.commit('updateName','wangwu');
            },1000)
        },
        // 对象类解构的写法
        aUpdateName2({state,commit}){
            console.log(state)
            setTimeout(()=>{
                commit('updateName','wangwu');
            },1000)
        }
    },
    getters: {
        fullname(state){
            return state.name + '1111';
        },
        fullname2(state,getters){
            return getters.fullname + '2222';
        },
        // 获取store对象中的state中的数据传入第三个参数
        fullname3(state,getters,rootState){
            return getters.fullname2 + '2222' + rootState.counter;
        }
    }
}


const store = new Vuex.Store({
    // 数据
    state: {
        counter : 0,
        students: [
            {id:110,name:'why',age:18},
            {id:111,name:'lion',age:21},
            {id:112,name:'lee',age:29},
        ],
        info:{
            name:'lion',
            age:18,
            height:180
        }
    },
    // 同步操作
    mutations:{
        // 方法
        [INCREMENT](state){
            state.counter++
        },
        decrement(state){
            state.counter--
        },
        incrementCount(state,count){
            state.counter += count;
        },
        addStu(state,stu){
            state.students.push(stu);
        },
        incrementCount2(state,payload){
            // 传入的就不是count而是一个对象
            console.log(payload);
            state.counter += payload.count;
        },
        updateInfo(state){
            // 添加数据后只在插件中显示,但在视图中不响应
            // state.info['address'] = "nanjing"
            // 响应式添加数据
            Vue.set(state.info,'address2','nanjing2');
        },
        deleteInfo(state){
            // 删除数据后只在插件中显示,但在视图中不响应
            // delete state.info.age;
            // 响应式删除数据
            Vue.delete(state.info,'age');
        },
        updateInfo2(state){
            setTimeout(()=>{
                state.info.name = 'lion123'
            },1000); 
        },
        updateInfo3(state){
                state.info.name = 'lion12345678'
        }
    },
    //异步操作,用来接收api
    actions:{
        aUpdateInfo(context, payload){
            // 错误代码:不能在这里进行异步操作,action需要提交给mutation进行操作
            // setTimeout(() => {
            //     context.state.info.name = "lion123"
            // }, 1000);
            // 异步操作提交给mutations中的updateInfo3
            setTimeout(()=>{
                context.commit('updateInfo3');
                // 输出参数
                // console.log(payload);
                // 输出回调函数
                // payload()
                // 使用对象
                console.log(payload.message);
                payload.success()
            },1000)
        },
        // 使用promise写法,将函数与提交信息分开
        bUpdateInfo(context, payload){
            return new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    context.commit('updateInfo');
                    console.log(payload);
                    resolve(111)
                },1000)
            })
        }
    },
    //相当于计算属性
    getters:{
        powerCounter(state){
            return state.counter*state.counter
        },
        more20Stu(state){
            return state.students.filter(s=>s.age>20)
        },
        // 第二个参数是getters
        more20StuLen(state,getters){
            return getters.more20Stu.length
        },
        // 添加自定义参数
        moreAgeStu(state){
            // 写法1:
            // return function(age){
            //     return state.students.filter(s=>s.age>age)
            // }

            //写法2:箭头函数
            return age=>{
                return state.students.filter(s=>s.age>age)
            }
        }
    },
    // 模块
    modules:{
        a : moduleA
    }
})


// 3.导出store对象
export default store;